<template>
  <div class="content-container">
    <div class="stat-header">
      <el-radio-group v-model="sortVal">
        <el-radio-button label="sale">销量</el-radio-button>
        <el-radio-button label="money">销售额</el-radio-button>
      </el-radio-group>
      <el-select v-model="sortDay" style="float: right;">
        <el-option label="昨天" value="yesterday"></el-option>
        <el-option label="今天" value="today"></el-option>
        <el-option label="前3天" value="three_days"></el-option>
        <el-option label="前7天" value="seven_days"></el-option>
        <el-option label="前14天" value="fourteen_days"></el-option>
      </el-select>
    </div>
    <div>
      <ve-pie :data="chartData" :extend="chartExtend"></ve-pie>
    </div>
    <div class="stat-line"></div>
    <div>
      <p style="text-align:center;padding: 15px 0;">全国销量分布图</p>
      <ve-map :data="mapData" :extend="mapExtend"></ve-map>
    </div>
  </div>
</template>

<script>
// import statData from "@/config/data";
import { getStatData } from '@/request/api';
export default {
  data() {
    return {
      sortVal: "sale",
      sortDay: "yesterday",
      chartData: {},
      statData: {},
      chartExtend: {
        series: {
          // type: 'pie',
          center: ["30%", "40%"],
          radius: ["30%", "55%"],
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 20,
          width: 300,
          height: 100,
          textStyle: {
            width: 40,
          },
          tooltip: {
            show: false,
          },
        },
      },
      mapExtend: {
        legend: {
          show: false,
        },
        tooltip: {
          formatter: '{b} <br/>销量： {c}'
        },
        visualMap: {
          show: true,
          min: 0,
          max: 1000000,
          calculable: true,
          inRange: {
            color: ["#FFFFFF", "#FA8072", "#FF4500", "#A52A2A"],
          },
        },
        series: {
          type: 'map',
          showLegendSymbol: false,
          aspectScale: 0.85,
          zoom: 1.2,
          label: {
            show: false,
            position: ["50%", "50%"],
          },
          itemStyle: {
            areaColor: "rgb(136, 132, 216)",
            borderColor: "#fff",
            borderWidth: 1,
          },
          emphasis: {
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: "",
            },
          },
        },
      },
      mapData: {},
    };
  },
  watch: {
    sortVal(newVal, oldVal) {
      this.calcStatData();
    },
    sortDay(newVal, oldVal) {
      this.calcStatData();
    },
  },
  methods: {
    calcStatData() {
      var objData = {
        columns: [
          "name",
          this.sortVal == "sale"
            ? "sale_" + this.sortDay
            : this.sortDay + "_money",
        ],
        rows: this.statData.salePie,
      };
      this.$set(this, "chartData", objData);
    },
  },
  created() {
    getStatData({}).then(res => {
      if (res.errno === 0) {
        this.statData = res.data
        var objData = {
          columns: [
            "name",
            this.sortVal == "sale"
              ? "sale_" + this.sortDay
              : this.sortDay + "_money",
          ],
          rows: this.statData.salePie,
        };
        this.$set(this, "chartData", objData);
        var mapData = {
          columns: ["areaName", "saleNum"],
          rows: this.statData.saleMap,
        }
        this.$set(this, 'mapData', mapData)
      }
      
    })
  },
};
</script>

<style lang="less" scoped>
.stat-line {
  background-color: #f0f0f0;
  height: 2px;
}
</style>